<template>
	<view class="chat-list-item" @tap="toChatRoom">
		<view class="user-herd"><image-cache :imgSrc="item.avatar" mode="aspectFill"></image-cache></view>

		<view class="chat-mssgae">
			<view class="chat-mesgae-user">
				<view class="chat-mesgae-nickName">
					{{ item.nickName }}
					<view :class="[item.isVip ? 'icon-VIP' : '']" class="icon iconfont"></view>
				</view>
				<view class="chat-mesgae-time">{{ item.lastTime | chatDateFormat }}</view>
			</view>
			<view class="chat-mesgae-info">
				<view v-if="item.messageType === 'TEXT'|| item.messageType === 'txt'" class="chat-mesgae-msg">{{ item.lastMessage }}</view>
				<view v-else-if="item.messageType === 'img'" class="chat-mesgae-msg">[图片]</view>
				<view v-else-if="item.messageType === 'audio'" class="chat-mesgae-msg">[语音]</view>
				<view v-else  class="chat-mesgae-msg">[表情]</view>
				<view v-if="item.unreadCount>0" :class="[item.unreadCount < 10 ? 'chat-mesgae-unread' : 'chat-mesgae-unread-more']">
					{{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import imageCache from '../image-cache/image-cache.vue'; 
export default {
	components:{
		imageCache
	},
	props:{
		item:Object,
		type:String
	},
	methods:{
		toChatRoom(){
			uni.navigateTo({
				url:`../chatroom/chatroom?user=${JSON.stringify(this.item)}`
			})
		}
	},
	filters: {
		chatDateFormat(date) {
			let day = 24 * 3600 * 1000;
			let today = new Date();
			let loaclDate = new Date(parseInt(date));
			let time = today.getTime() - loaclDate.getTime();
			if (day > time && today.getDay() === loaclDate.getDay() && today.getFullYear() === loaclDate.getFullYear() && today.getMonth() === loaclDate.getMonth()) {
				return (
					(loaclDate.getHours() < 10 ? '0' + loaclDate.getHours() : loaclDate.getHours()) +
					':' +
					(loaclDate.getMinutes() < 10 ? '0' + loaclDate.getMinutes() : loaclDate.getMinutes())
				);
			} else if (day > time && today.getDay() !== loaclDate.getDay() && today.getFullYear() === loaclDate.getFullYear() && today.getMonth() === loaclDate.getMonth()) {
				return (
					'昨天 ' +
					(loaclDate.getHours() < 10 ? '0' + loaclDate.getHours() : loaclDate.getHours()) +
					':' +
					(loaclDate.getMinutes() < 10 ? '0' + loaclDate.getMinutes() : loaclDate.getMinutes())
				);
			} else {
				return (
					loaclDate.getFullYear() +
					'年' +
					(loaclDate.getMonth() < 10 ? '0' + loaclDate.getMonth() : loaclDate.getMonth()) +
					'月' +
					(loaclDate.getDay() < 10 ? '0' + loaclDate.getDay() : loaclDate.getDay()) +
					'日'
				);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.chat-list-item {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 20rpx 40rpx;
	align-items: center;
	background-color: #ffffff;
	border-bottom: 1rpx solid #eeeeee;
	.user-herd {
		width: 120rpx;
		height: 120rpx;
		margin-right: 15rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.chat-mssgae {
		flex: 1;
		.chat-mesgae-user {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.chat-mesgae-nickName {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
			}
			.icon-VIP {
				color: #fece0a;
				margin-left: 8rpx;
				font-size: 35rpx;
			}
			.chat-mesgae-time {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.chat-mesgae-info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.chat-mesgae-msg {
				font-size: 28rpx;
				color: #999999;
			}
			.chat-mesgae-unread {
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				line-height: 25rpx;
				color: #ffffff;
				background: #ff7a7a;
				border-radius: 50%;
			}
			.chat-mesgae-unread-more {
				padding: 5rpx 8rpx;
				font-size: 25rpx;
				line-height: 25rpx;
				color: #ffffff;
				background: #ff7a7a;
				border-radius: 18rpx;
			}
		}
	}
}
</style>
